{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2>交易明细</h2>
    <div class="mb-3">
        <button id="btn-expense" class="btn btn-primary me-2">支出</button>
        <button id="btn-income" class="btn btn-outline-primary">收入</button>
    </div>
    <div class="card">
        <div class="card-body">
            <table class="table table-hover" id="transactionsTable">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>分类</th>
                        <th>金额</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody id="expense-tbody">
                    {% for t in expense_transactions %}
                    <tr>
                        <td>{{ t.date.strftime('%Y-%m-%d') }}</td>
                        <td>{{ t.category.name if t.category else '未知分类' }}</td>
                        <td class="expense">¥{{ '%.2f'|format(t.amount) }}</td>
                        <td>{{ t.description }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tbody id="income-tbody" style="display:none;">
                    {% for t in income_transactions %}
                    <tr>
                        <td>{{ t.date.strftime('%Y-%m-%d') }}</td>
                        <td>{{ t.category.name if t.category else '未知分类' }}</td>
                        <td class="income">¥{{ '%.2f'|format(t.amount) }}</td>
                        <td>{{ t.description }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
const btnExpense = document.getElementById('btn-expense');
const btnIncome = document.getElementById('btn-income');
const expenseTbody = document.getElementById('expense-tbody');
const incomeTbody = document.getElementById('income-tbody');
btnExpense.onclick = function() {
    btnExpense.classList.add('btn-primary');
    btnExpense.classList.remove('btn-outline-primary');
    btnIncome.classList.remove('btn-primary');
    btnIncome.classList.add('btn-outline-primary');
    expenseTbody.style.display = '';
    incomeTbody.style.display = 'none';
};
btnIncome.onclick = function() {
    btnIncome.classList.add('btn-primary');
    btnIncome.classList.remove('btn-outline-primary');
    btnExpense.classList.remove('btn-primary');
    btnExpense.classList.add('btn-outline-primary');
    expenseTbody.style.display = 'none';
    incomeTbody.style.display = '';
};
</script>
{% endblock %}